<template>
  <div class="xxxxx">
    <el-input-number v-model="num" :min="1" controls-position="right" />
    <el-button type="primary" @click="goto">跳转到</el-button>
  </div>
  <div
    style="height: 100%; padding: 20px; background: #fff; box-sizing: border-box"
    v-loading="loading"
  >
    <div style="height: 100%; border: 1px solid #ddd">
      <div class="table-header">
        <div style="flex: 1">序号</div>
        <div style="flex: 1">角色</div>
        <div style="flex: 1">账号</div>
        <div style="flex: 1">手机号</div>
        <div style="flex: 1">邮箱</div>
        <div style="flex: 1">性别</div>
      </div>
      <div class="table-body">
        <virtual-scroll :data="list" ref="scrollRef">
          <template #item="{ data }">
            <div class="item">
              <div style="flex: 1">{{ data.index }}</div>

              <div style="flex: 1">{{ data.role }}</div>
              <div style="flex: 1">{{ data.account }}</div>
              <div style="flex: 1">{{ data.phone }}</div>
              <div style="flex: 1">{{ data.email }}</div>
              <div style="flex: 1">{{ data.sex }}</div>
            </div>
          </template>
        </virtual-scroll>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { sleep } from '../../../../utils/index.ts';
import { createUserList } from '../../../../utils/mock.ts';
import VirtualScroll from '@/components/virtual-scroll/index.vue';
type Iitem = {
  index: number;
  role: string;
  account: string;
  phone: string;
  email: string;
  sex: string;
};
const scrollRef = ref<InstanceType<typeof VirtualScroll>>();
const list = ref<Iitem[]>([]);
const num = ref(2000);
const loading = ref(false);
const colums = [
  { name: '序号', key: 'index' },
  { name: '角色', key: 'role' },
  { name: '账号', key: 'account' },
  { name: '手机号', key: 'phone' },
  { name: '邮箱', key: 'email' },
  { name: '性别', key: 'sex' },
  { name: '状态', key: 'status' },
  { name: '备注', key: 'remark' },
  { name: '创建时间', key: 'createTime' },
  { name: '更新时间', key: 'updateTime' },
  { name: '操作', key: 'operation' }
];

const goto = () => {
  console.log(num.value);
  scrollRef.value?.scrollToIndex(num.value);
};
const queryData = async () => {
  loading.value = true;
  await sleep(1000);
  list.value = createUserList({ pageSize: 100000, pageNum: 1 });
  loading.value = false;
};

onMounted(() => {
  queryData();
});
</script>

<style lang="less" scoped>
.xxxxx {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1000;
  gap: 10px;
}
.table-header {
  display: flex;
  font-size: 14px;
  background: #eee;
  font-weight: bolder;
  border-bottom: 1px solid #ddd;
  & > div {
    flex: 1;
    line-height: 40px;
    padding: 0 20px;
    border-right: 1px solid #ddd;
    &:last-child {
      margin-right: 17px;
    }
  }
}
.table-body {
  overflow: auto;
  background: #fff;
  height: calc(100% - 41px);
  font-size: 14px;
  color: #606266;
  .item {
    display: flex;
    border-bottom: 1px solid #ddd;
    & > div {
      flex: 1;
      padding: 0 20px;
      line-height: 40px;
      border-right: 1px solid #ddd;
    }
  }
}
</style>
